<template>
  <div class="">
    <cus-search>
      <cus-search-item>
        <Form :model="form" :label-width="80">
          <FormItem label="原料名称" class="mr_48 mb_20">
            <Input
              v-model.trim="form.jiaoHuoName"
              clearable
              style="width: 200px"
              maxlength="20"
              placeholder="请输入原料名称"
            ></Input>
          </FormItem>
          <cusButton
            class="mr_10 mb_20"
            type="primary"
            @onClick="
              () => {
                this.pages.page = 1;
                this.onInit();
              }
            "
            >查询</cusButton
          >
          <!-- <cusButton type="primary" @onClick="$refs['cusUploadModal'].show()"
            >导入</cusButton
          > -->
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card title="标准营养库" class="mt_20">
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :bottomClass="['cus-page']"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row }" slot="water">
          {{ row.water.toFixed(2) }}
        </template>
        <template slot-scope="{ row }" slot="energy">
          {{ row.energy.toFixed(2) }}
        </template>
        <template slot-scope="{ row }" slot="pr">
          {{ row.pr.toFixed(2) }}
        </template>
        <template slot-scope="{ row }" slot="fat">
          {{ row.fat.toFixed(2) }}
        </template>
        <template slot-scope="{ row }" slot="carbohydrate">
          {{ row.carbohydrate.toFixed(2) }}
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF', padding: '0 8px' }"
              @onClick="onCheck(row)"
            >
              查看详情
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="onInit"
        ></cus-page>
      </div>
    </cus-card>

    <cus-uploadModal
      ref="cusUploadModal"
      :uploadFnc="uploadStandard"
      :showUpload="true"
      :showTemp="false"
      uploadLabel="导出基础数据"
      fileName="fileName"
      :cusParams="{
        id: 'RK1603518306003',
        name: 'undefined'
      }"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @onOk="onInit"
    >
    </cus-uploadModal>
    <nourishmentDetailModal
      ref="nourishmentDetailModal"
    ></nourishmentDetailModal>
  </div>
</template>

<script>
import {
  getNutritionCategoryList,
  uploadStandard,
  getNutritionCategoryType
} from "@/api/business/business";
import nourishmentDetailModal from "./components/nourishmentDetailModal/nourishmentDetailModal";

export default {
  components: { nourishmentDetailModal },
  name: "",
  data() {
    return {
      uploadStandard: uploadStandard,
      form: {
        startTime: "",
        endTime: "",
        loading: false
      },
      columns: [
        {
          title: "序号",
          width: 70,
          key: "name",
          type: "index",
          align: "center"
        },
        {
          title: "原料名称",
          minWidth: 200,
          key: "name",
          align: "center"
        },
        {
          title: "可食部/%",
          minWidth: 120,
          key: "eatable",
          align: "center"
        },
        {
          title: "水分含量/克",
          minWidth: 120,
          slot: "water",
          align: "center"
        },
        {
          title: "能量/千卡",
          minWidth: 120,
          slot: "energy",
          align: "center"
        },
        {
          title: "蛋白质/克",
          minWidth: 120,
          slot: "pr",
          align: "center"
        },
        {
          title: "脂肪/克",
          minWidth: 120,
          slot: "fat",
          align: "center"
        },
        {
          title: "碳水化合物/克",
          minWidth: 140,
          slot: "carbohydrate",
          align: "center"
        },
        {
          title: "操作",
          width: 120,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.getNutritionCategoryTypeApi();
    this.onInit();
  },
  methods: {
    onInit() {
      this.getNutritionCategoryListApi();
    },
    onCheck(row) {
      this.$refs["nourishmentDetailModal"].form.date = [row];
      this.$refs["nourishmentDetailModal"].detailForm = row;
      this.$refs["nourishmentDetailModal"].form.name = row.name;
      this.$refs["nourishmentDetailModal"].show();
    },
    // 获取伙食登记薄列表
    getNutritionCategoryListApi() {
      this.form.loading = true;
      return new Promise(resolve => {
        getNutritionCategoryList({
          nutritionalName: this.form.jiaoHuoName,
          id: -1,
          current: this.pages.page,
          size: this.pages.pageSize
        }).then(res => {
          if (res.retCode === 2000) {
            console.log(res);
            this.form.loading = false;
            this.data = res.data;
            this.pages.pageTotal = res.total;
            resolve();
          } else this.form.loading = false;
        });
      });
    },
    // 获取原料类型列表
    getNutritionCategoryTypeApi() {
      return new Promise((resolve, reject) => {
        getNutritionCategoryType({}).then(res => {
          if (res.retCode === 2000) {
            resolve();
          } else reject();
        });
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
